<!--  -->
<template>
  <div class="home container">
    <div class="goods-tabbar">
      <h1>今日特惠</h1>
      <ul>
        <li>优选全犬种成犬粮</li>
        <li>优选年幼猫粮</li>
        <li>Royal 小型成犬粮</li>
        <li>Canin 全阶段猫粮</li>
        <li>小型宠物窝</li>
        <li>博美新品狗狗</li>
      </ul>
    </div>

    <div class="wrapper">
      <Wrapper />
    </div>
    <!-- <List  :list="searchList" /> -->
    <div>
      <Mytitle goodsTitle="热销狗狗" :imgSrc="titleImg2" :more="true" :catalogId="9" />
      <List :list="dogList" />
      <Mytitle goodsTitle="热销猫咪" :imgSrc="titleImg2" :more="true" :catalogId="10" />
      <List :list="catList" />
      <Mytitle goodsTitle="热销仓鼠" :imgSrc="titleImg2" :more="true" :catalogId="11" />
      <List :list="mouseList" />
      <Mytitle goodsTitle="热销猫粮" :imgSrc="titleImg2" :more="true" :catalogId="5" />
      <List :list="catfoodList" />
      <Mytitle goodsTitle="热销狗粮" :imgSrc="titleImg2" :more="true" :catalogId="6" />
      <List :list="dogfoodList" />
      <Mytitle goodsTitle="热销仓鼠粮" :imgSrc="titleImg2" :more="true" :catalogId="7" />
      <List :list="mousefoodList" />
    </div>
    <!-- <Mytitle goodsTitle="热销狗狗" :imgSrc="titleImg1" :more="true" />
    <List :list="recomendList" /> -->
  </div>
</template>

<script>
// 引入Api
// import {JingpinApi} from '../axios/api'
import Wrapper from "../components/home/Wrapper";
import Mytitle from "../components/home/Mytitle";
import List from "../components/home/List";
export default {
  name: "Home",
  data() {
    return {
      searchList: [],
      titleImg1: require("../assets/img/fashion.png"),
      titleImg2: require("../assets/img/host.png"),
      dogList: [],
      catList: [],
      mouseList: [],
      catfoodList: [],
      dogfoodList: [],
      mousefoodList: [],
    };
  },
  components: {
    Wrapper,
    Mytitle,
    List,
  },
  created() {
    this.getdogList();
    this.getcatList();
    this.getmouseList();
    this.getcatfoodList();
    this.getdogfoodList();
    this.getmousefoodList();
  },
  computed: {
    mapboxMap1() {
      // return this.$store.state.mapbox.map;
      return this.$store.state.searchList;
    },
  },
  watch: {
    mapboxMap1(newData) {
      // console.log(newData);
      this.searchList = newData;
    },
  },
  methods: {
    async getdogList() {
      this.dogList = [];
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=9`
      );
      res.page.list.forEach((item) => {
        if (item.publishStatus) {
          var data = {};
          data.id = item.id;
          data.catalogId = item.catalogId;
          data.saleCount = 0;
          item.skus.forEach((item1) => {
            data.saleCount += item1.saleCount;
          });
          data.imgSrc = item.images[0];
          data.proName = item.proName;
          data.price = item.price;
          if (data.saleCount > 250) {
            this.dogList.push(data);
          }
        }
      });
    },
    async getcatList() {
      this.catList = [];
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=10`
      );
      res.page.list.forEach((item) => {
        if (item.publishStatus) {
          var data = {};
          data.id = item.id;
          data.catalogId = item.catalogId;
          data.saleCount = 0;
          item.skus.forEach((item1) => {
            data.saleCount += item1.saleCount;
          });
          data.imgSrc = item.images[0];
          data.proName = item.proName;
          data.price = item.price;
          if (data.saleCount > 250) {
            this.catList.push(data);
          }
        }
      });
    },
    async getmouseList() {
      this.mouseList = [];
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=11`
      );
      res.page.list.forEach((item) => {
        if (item.publishStatus) {
          var data = {};
          data.id = item.id;
          data.catalogId = item.catalogId;
          data.saleCount = 0;
          item.skus.forEach((item1) => {
            data.saleCount += item1.saleCount;
          });
          data.imgSrc = item.images[0];
          data.proName = item.proName;
          data.price = item.price;
          if (data.saleCount > 150) {
            this.mouseList.push(data);
          }
        }
      });
    },
    async getcatfoodList() {
      this.catfoodList = [];
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=5`
      );
      res.page.list.forEach((item) => {
        if (item.publishStatus) {
          var data = {};
          data.id = item.id;
          data.catalogId = item.catalogId;
          data.saleCount = 0;
          item.skus.forEach((item1) => {
            data.saleCount += item1.saleCount;
          });
          data.imgSrc = item.images[0];
          data.proName = item.proName;
          data.price = item.price;
          if (data.saleCount > 200) {
            this.catfoodList.push(data);
          }
        }
      });
    },
    async getdogfoodList() {
      this.dogfoodList = [];
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=6`
      );
      res.page.list.forEach((item) => {
        if (item.publishStatus) {
          var data = {};
          data.id = item.id;
          data.catalogId = item.catalogId;
          data.saleCount = 0;
          item.skus.forEach((item1) => {
            data.saleCount += item1.saleCount;
          });
          data.imgSrc = item.images[0];
          data.proName = item.proName;
          data.price = item.price;
          if (data.saleCount > 150) {
            this.dogfoodList.push(data);
          }
        }
      });
    },
    async getmousefoodList() {
      this.dogfoodList = [];
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=7`
      );
      res.page.list.forEach((item) => {
        if (item.publishStatus) {
          var data = {};
          data.id = item.id;
          data.catalogId = item.catalogId;
          data.saleCount = 0;
          item.skus.forEach((item1) => {
            data.saleCount += item1.saleCount;
          });
          data.imgSrc = item.images[0];
          data.proName = item.proName;
          data.price = item.price;
          if (data.saleCount > 180) {
            this.mousefoodList.push(data);
          }
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/total.less";
.home {
  background-color: white;
  .goods-tabbar {
    float: left;
    background-color: #f8f5f5;
    width: 250px;
    box-sizing: border-box;
    height: 360px;
    h1 {
      padding: 10px 20px;
      height: 30px;
      margin: 20px 0;
      line-height: 30px;
      text-align: center;
      font-weight: bold;
      font-size: 30px;
      background-color: red;
    }
    ul {
      li {
        height: 25px;
        background-color: rgb(233, 230, 230);
        border-radius: 5px;
        padding: 5px;
        line-height: 25px;
        margin: 5px 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
      }
    }
  }
  .wrapper {
    float: right;
    background-color: #f5f5f5;
    width: 900px;
    height: 360px;
    margin-bottom: 10px;
  }
}
</style>
